<template>
	<view class="con">
		<!-- <view class="bg_balck"></view> -->
		<view class="top">
			<view class="top1 flex flex_between">
				<view class="top1v1">
					<view class="top1v1_1 flex">
						<view class="top1v1_1v1">Express<text>back</text></view>
						<image class="top1v1_1img" @click="showTan_wen()" src="/static/index/img12.png" mode="widthFix"></image>
					</view>
					<view class="top1v1_2">快递回收</view>
				</view>
				<view class="top1v2 flex" @click="showTan_video">
					<image class="top1v2_img" src="/static/index/img13.png" mode="widthFix"></image>
					<view class="top1v2_v">实操教程</view>
				</view>
			</view>
			<!-- 进度 -->
			<view class="top2">
        <view class="flex flex_between">
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
        </view>
        <view class="flex flex_between">
          <view class="top2li_2">申请地址</view>
          <view class="top2li_2">下单购物</view>
          <view class="top2li_2">确认收货</view>
          <view class="top2li_2">回收结算</view>
        </view>
			</view>
		</view>
		<view class="hui flex flex_between">
			<view class="huili">
				<view class="huili_v1">已回收快递</view>
				<view class="huili_v2">{{expressInfo.left_val || 0}}</view>
			</view>
			<navigator hover-class="none" url="/packageA/index/address" class="huili">
				<view class="huili_v1">我的地址</view>
				<view class="huili_v2">{{expressInfo.right_val || 0}}</view>
			</navigator>
		</view>
		<!-- 列表 -->
		<view class="list">
			<!-- 每一个li -->
			<view class="listli" v-for="(item,index) in expressDataList" :key="index">
				<view class="listlit flex flex_between">
					<view class="listlitz">{{item.city}}</view>
					<view class="listlity" @click="showTan(item)">申请</view>
				</view>
				<view class="listlim">
				<!-- 	<view class="listlimc flex">
						<view class="listlim_1">电话:</view>
						<view class="listlim_2">{{item.tel}}</view>
					</view> -->
          <view class="listlimc flex">
          	<view class="listlim_1"></view>
          	<view class="listlim_2"></view>
          </view>
					<view class="listlimc flex">
						<view class="listlim_1">地址:</view>
            <!-- <view class="listlim_2">{{item.address}}</view> -->
						<view class="listlim_2">***************{{item.address.substring(15)}}</view>
					</view>
				</view>
				<view class="listlib flex">
					<view class="listlib_1">￥<text>{{item.money}}</text></view>
					<view class="listlib_2">剩余 <text>{{item.kc}}</text> 个 </view>
				</view>
			</view>
		</view>
		<view class="zhezhao" v-if="isShow  || isShow_wen ||isShow_video" @click="hideTan"></view>
		<!-- 点击提现弹出 -->
		<view class="tan" v-if="isShow">
			<view class="tan_title">申请地址</view>
			<view class="tan_t flex">
				<view class="tan_newli_wrap">
					<view class="tan_newli flex" v-for="(item,index) in expressTip.express_2">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">{{item.content}}</view>
					</view>
				</view>

			</view>
			<view class="tan_b flex flex_between">
				<view class="tan_b_d1" @click="hideTan">取消</view>
				<view class="tan_b_d2" @click="queRenHandle">确认</view>
			</view>
		</view>
    <!-- 通用问号弹出 -->
    <view class="tan tan_wen" v-if="isShow_wen">
    	<view class="tan_title">关于快递回收</view>
    	<view class="tan_t flex">
    		<view class="tan_newli_wrap">
    			<view class="tan_newli flex" v-for="(item,index) in expressTip.express">
    			  <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
    			  <view class="tan_newli_v">{{item.content}}</view>
    			</view>
    		</view>
    
    	</view>
    	<view class="tan_b flex flex_between">
    		<view class="tan_b_d2" @click="hideTan">我已知晓</view>
    	</view>
    </view>
    <!-- 实操课程 -->
    <view class="tan tan_video" v-if="isShow_video">
        <video id="myVideo" :src="expressTip.video" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
    </view>
	</view>
</template>

<script>
  import {
    expressList,//快递回收
    otherExpressTips,//快递回收说明、视频
    expressExpressGet //快递回收任务提取
  } from '@/request/api.js'
	export default {
		data() {
			return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
				isShow: false,
        isShow_wen:false,
        isShow_video:false,
        expressInfo:{},
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15,//每页数量
        expressDataList:[],//快递回收列表
        expressTip:{}, //快递回收说明、视频
        selectExpressInfo:{}//申请选择的快递
			};
		},
    onLoad(){
      // 清空数据
      this.page = 1
      this.expressList = []
      this.expressListFun() //快递回收
    },
    onShow() {
      this.isShow = false
      this.otherExpressTipsFun() // 获取快递回收说明、视频
      this.isLogin = uni.getStorageSync('isLogin') || 1
      if (this.isLogin === 1) {
      	console.log('未授权登录')
        uni.hideShareMenu()
      }else{
        uni.showShareMenu({
        	withShareTicket: true,
        	menus: ["shareAppMessage", "shareTimeline"]
        })
      }
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
		methods: {
      // 快递回收
      expressListFun(){
        let param = {
          openid:this.openid,
          page:this.page
        }
        expressList(param).then(res=>{
          console.log('获取快递回收列表')
          console.log(res)
          if (res.error_code === 0) {
            this.expressInfo = res.data
            
            this.total = Number(res.data.total);
            this.pagesizes = Number(res.data.pagesizes);
            let listRe = res.data.arrList
            if(listRe.length>0){
              this.expressDataList = this.expressDataList.concat(listRe);
            }
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 申请-确认
      queRenHandle(){
        console.log('点击-申请确认')
        let param = {
          openid:this.openid,
          aid:this.selectExpressInfo.id
        }
        console.log(param)
        expressExpressGet(param).then(res=>{
          if(res.error_code===0){
            uni.showToast({
              icon:'none',
              title:'申请成功'
            })
            setTimeout(function(){
              uni.navigateTo({
                url:'/packageA/index/address'
              })
            },500)
          }else{
            let title = ''
            if(res.msg==='已提取过'){
              title = '已申请过'
            }else{
              title = res.msg
            }
            uni.showToast({
              icon:'none',
              title:title
            })
          }
        })
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.expressListFun()
      },

			showTan(item) {
        this.selectExpressInfo = item
				this.isShow = true
			},
      showTan_wen() {
      	this.isShow_wen = true
      },
      showTan_video() {
      	this.isShow_video = true
      },
			hideTan() {
				this.isShow = false
        this.isShow_wen = false
        this.isShow_video = false
			},
      // 获取快递回收说明、视频
      otherExpressTipsFun() {
        otherExpressTips().then(res => {
          console.log('获取快递回收说明、视频')
          console.log(res)
          if (res.error_code === 0) {
            this.expressTip = res.data
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
		},
    // 分享微信好友
    onShareAppMessage(event) {
    	console.log(event);
        return {
        	title: '陌上未来，没有概率做了就赚',
        	path: '/packageA/index/expressRecycling?pid=' + uni.getStorageSync('userInfo').id,
        	// imageUrl: imageUrl
        }
    },
    //分享到朋友圈
    onShareTimeline(event) {
    	console.log(event);
    	return {
    		title: '陌上未来，没有概率做了就赚',
    		path: '/packageA/index/expressRecycling?pid=' + uni.getStorageSync('userInfo').id,
    		query: 'pid=' + uni.getStorageSync('userInfo').id,
    		// imageUrl: imageUrl
    	}
    }
	}
</script>

<style scoped lang="scss">
	.con {
		.top {
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			position: relative;
			z-index: 1;
			padding-top: 54rpx;

			.top1 {
				width: 100%;
				height: auto;
				align-items: normal;

				.top1v1 {
					width: 400rpx;
					height: 140rpx;
					border-radius: 0px 100rpx 100rpx 0px;
					background-color: rgba(249, 191, 65, 1);
					padding: 16rpx 30rpx;
					box-sizing: border-box;

					.top1v1_1 {
						.top1v1_1v1 {
							line-height: 58rpx;
							color: rgba(16, 16, 16, 1);
							font-size: 48rpx;
							font-family: 'AvantGardeFont';
							font-weight: bold;

							text {
								font-weight: 100;
							}
						}

						.top1v1_1img {
							width: 30rpx;
							height: 30rpx;
							position: relative;
							top: -15rpx;
						}
					}

					.top1v1_2 {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						margin-top: 6rpx;
					}
				}

				.top1v2 {
					width: 220rpx;
					height: 68rpx;
					border-radius: 100rpx;
					background-color: rgba(249, 191, 65, 1);
					justify-content: center;
					margin-right: 30rpx;

					.top1v2_img {
						width: 28rpx;
						height: auto;
            margin-right: 10rpx;
					}

					.top1v2_v {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
					}
				}

			}

			.top2 {
				width: 650rpx;
				height: auto;
				margin: 30rpx;
				box-sizing: border-box;
				border-top: 2rpx solid #d3d3d3;
				padding: 30rpx 0;
				margin-top: 50rpx;
        margin-bottom: 20rpx;
        .top2li_2 {
        	color: rgba(0, 0, 0, 1);
        	font-size: 28rpx;
        	margin-top: -20rpx;
        }
        .top2li_1 {
        	width: 16rpx;
        	height: 16rpx;
        	border-radius: 100%;
        	margin: 0 auto;
        	position: relative;
        	top: -38rpx;
        	background-color: rgba(137, 137, 137, 1);
        }
        .width104{
          width: 104rpx;
        }
				.top2li {
					width: 25%;
					text-align: center;
					.top2li_2.top2li_2_left{
						text-align: left;
					}
					.top2li_2.top2li_2_right{
						text-align: right;
					}
				}
			}
		}

		.hui {
			width: 100%;
			height: auto;
      position: relative;
			.huili {
				width: 346rpx;
				height: 140rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 1);
				text-align: center;

				.huili_v1 {
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
					line-height: 40rpx;
					margin-top: 28rpx;
					margin-bottom: 4rpx;
				}

				.huili_v2 {
					line-height: 56rpx;
					color: rgba(16, 16, 16, 1);
					font-size: 40rpx;
					font-family: 'AvantGardeFont';
				}
			}
		}

		.list {
			width: 100%;
			height: auto;
      position: relative;
      z-index: 1;
			.listli {
				width: 100%;
				height: auto;
				border-radius: 20rpx;
				overflow: hidden;
				background-color: rgba(255, 255, 255, 1);
				margin-top: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.listlit {
					width: 100%;
					height: auto;
					margin-bottom: 24rpx;

					.listlitz {
						height: 50rpx;
						font-weight: bold;
						line-height: 50rpx;
						color: rgba(16, 16, 16, 1);
						font-size: 36rpx;
						border-bottom: 4rpx solid rgba(249, 191, 65, 1);
					}

					.listlity {
						width: 160rpx;
						height: 48rpx;
						line-height: 48rpx;
						border-radius: 40rpx;
						background-color: rgba(249, 191, 65, 1);
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						text-align: center;
					}
				}

				.listlim {
					width: 100%;
					height: auto;

					.listlimc {
						width: 100%;
						height: auto;
            // min-height: 40rpx;
						line-height: 40rpx;
						color: rgba(16, 16, 16, 1);
						font-size: 28rpx;
						align-items: normal;
						margin-bottom: 8rpx;

						.listlim_1 {
							width: 80rpx;
						}

						.listlim_2 {
							width: 620rpx;
							max-height: 90rpx;
							overflow: hidden;
						}
					}
				}

				.listlib {
					width: 100%;
					height: auto;
					margin-top: 50rpx;
					align-items: baseline;

					.listlib_1 {
						color: rgba(0, 0, 0, 1);
						font-size: 24rpx;
						margin-right: 16rpx;

						text {
							font-size: 50rpx;
							font-family: 'AvantGardeFont';
						}
					}

					.listlib_2 {
						color: rgba(137, 137, 137, 1);
						font-size: 24rpx;

						text {
							font-family: 'AvantGardeFont';
							margin: 0 4rpx;
						}
					}
				}
			}
		}
		.tan_title{
			color: rgba(16,16,16,1);
			font-size: 32rpx;
		}
	}
	.tan {
		margin-top: -233rpx;
	}
  .tan_video{
    width: 650rpx;
    height: 1105rpx;
    padding: 0 0;
    margin-left: -325rpx;
  }
  .tan.tan_video{
    margin-top: -552rpx;
  }
  video {
    width: 650rpx;
    height: 1105rpx;
  }
</style>